<template>
  <div
    :class="[b({
      center: centered,
      clickable: isLink || clickable,
    }), {
      'van-hairline': border
    }]"
    @click="onClick"
  >

    <div v-show="checkMode" class="van-checkbox">
      <div
        :class="{
          'van-checkbox__icon': checkMode,
          'van-checkbox__icon--round': checkMode,
          'van-checkbox__icon--checked': checked}" >
        <i class="van-icon van-icon-success"/>
      </div>
    </div>

    <avatar
      v-if="avatar"
      v-show="!checkMode"
      :icon="icon"
      :bg-color="bgColor"
      :color="color"
      :text="title"
      :thumb="thumb"
      :image="image"
      :circle="circle"
      :size="size"
      :rounded="rounded"/>
    <div :class="b('content')">
      <slot name="title">
        <div v-if="title || isDef(date)" :class="b('row')">
          <div v-if="title" :class="b('title')" v-html="title"/>
          <div v-if="isDef(date)" :class="b('date')">{{ date }}</div>
        </div>
      </slot>
      <slot name="desc">
        <div v-if="desc || isDef(tag)" :class="b('row')">
          <div v-if="desc" :class="b('desc')" v-html="desc"/>
          <div v-if="isDef(tag)" :class="b('tag')">
            <van-tag
              :type="tagType"
              :plain="tagPlain"
              :mark="tagMark">{{ tag }}</van-tag>
          </div>
        </div>
      </slot>
    </div>
    <slot name="right-icon" @click="onClickRightIcon">
      <icon v-if="isLink" :class="b('right-icon', arrowDirection)" name="arrow" />
    </slot>
  </div>
</template>

<script>
import Avatar from '@/components/Avatar'
import RouterLink from 'vant/lib/mixins/router-link'
import create from 'vant/lib/utils/create'
export default create({
  name: 'card-list',
  mixins: [RouterLink],
  components: {
    Avatar
  },
  props: {
    avatar: {
      type: Boolean,
      default: true
    },
    icon: String,
    bgColor: {
      type: String
    },
    color: {
      type: String
    },
    image: String,
    thumb: String,
    title: String,
    circle: Boolean,
    rounded: Boolean,
    size: {
      type: String,
      default: '40'
    },
    desc: String,
    centered: {
      type: Boolean,
      default: true
    },
    date: [Number, String, Date],
    tag: [Number, String],
    tagType: {
      type: String,
      default: 'primary'
    },
    tagPlain: {
      type: Boolean,
      default: true
    },
    tagMark: Boolean,
    isLink: Boolean,
    clickable: Boolean,
    arrowDirection: String,
    border: {
      type: Boolean,
      default: true
    },
    checkMode: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick() {
      this.$emit('click')
      this.routerLink()
    },
    onClickRightIcon() {
      this.$emit('click-right-icon')
    }
  }
})
</script>
